<template>
  <a-modal class="common-modal" :title="title" :footer="null" :width="550" :scroll="{ y: 440 }" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel" :maskClosable="false" style="top:5%;">
    <a-spin :spinning="loading">
      <div style="height: 440px; overflow-y: scroll;">
        <header class="edit-other-header">
          <div >{{$t('common.sequenceNo')}}</div>
          <div ><span>{{$t('other.pipeline')}}</span></div>
          <div >
            <!--<a-checkbox v-model:checked="checkedAllStart" @change="onCheckedAllStart"> {{ checkedAllStart ? '一键停止' : '一键启动'}}</a-checkbox>-->
            <a-button size="small" type="primary" ghost   @click="onCheckedAllStart">{{$t('other.oneClickStart')}}</a-button>
          </div>
          <!--<div >-->
          <!--  <a-checkbox v-model:checked="checkedAllLogin" @change="onCheckedAllLogin">  {{ checkedAllLogin ? '桥接站登出' : '桥接站登录'}} </a-checkbox>-->
          <!--</div>-->
        </header>
        <div class="edit-other-contents" v-for="(item,index) in dataList" :key="index">
          <div> <span>{{ index+1 }}</span> </div>
          <div> <span>{{ item.lineNo }} ({{ item.name}})</span> </div>
          <div >
            <a-checkbox v-model:checked="item.status"></a-checkbox>
            <a-button size="small" type="primary" ghost   @click="onStart( item.lineNo, 1 )" class="ml-10" v-if="!item.status"> {{$t('layout.start')}} </a-button>
            <a-button size="small" type="danger" ghost  @click="onStart( item.lineNo, 0)" class="ml-10" v-else> {{$t('layout.close')}}</a-button>
          </div>
          <!--<div ><a-checkbox v-model:checked="item.check2">登录</a-checkbox></div>-->
        </div>
      </div>
      <!--<a-table :columns="otherColumns" :data-source="dataList" :pagination="false" size="small" :scroll="{ y: 440 }" @change="handleChange">
        <template #bodyCell="scope">
          <template v-if="scope.column.key === 'lineNo'" >
            <span>{{ scope.record.lineNo }} ({{ scope.record.name}})</span>
          </template>
          <template v-if="scope.column.key === 'check1'">
            <a-checkbox :checked="scope.check1"><span></span></a-checkbox>
          </template>
          <template v-if="scope.column.key === 'check2'">
            <a-checkbox><span></span></a-checkbox>
          </template>
        </template>
      </a-table>-->
      <!--<div class="common-modal-footer">-->
      <!--  <a-button @click="handleCancel" class="cancel">取消</a-button>-->
      <!--  <a-button @click="handleOk" type="primary" class="confirm">确定</a-button>-->
      <!--</div>-->
    </a-spin>
  </a-modal>
</template>
<script setup>
import {  nextTick, ref } from 'vue'
import axios from '@/utils/request'
import { getLocalStorage } from "@/utils";
// import { message } from 'ant-design-vue'
// import { pick } from 'lodash'
// const labelCol = { xs: { span: 24 }, sm: { span: 4 } }
// const wrapperCol = { xs: { span: 24 }, sm: { span: 19 } }
// import { otherColumns } from './prodTimeConfig'
// import { store } from '@/store'
import {message} from "ant-design-vue";
let title = ref('')
let visible = ref(false)
let confirmLoading = ref(false)
let formState = ref({})
let loading = ref(true)

let checkedAllStart= ref(false)
let checkedAllLogin= ref(false)

// let userList = computed(() => {
//   return store.state.normalData.employeesList
// })
// let staffNo = ref
let dataList = ref([])
let hangerLineList = ref([])
/*const data = [...Array(100)].map((_, i) => ({
  key: i,
  hangerNo: `Edward King ${i}`,
  address: 32,
  styleNo: `London, Park Lane no. ${i}`,
}));*/
// 启动
const onStart = async (lineNo, state) => {
  // console.log(lineNo, state)
  let param = []
  param.push({
    line: lineNo,
    startUp: state
  })
  await doParam(param)
}
// 一键启动
const onCheckedAllStart = async () => {
  // console.log(dataList.value)
  let param = []
  dataList.value && dataList.value.forEach(item=>{
    param.push({
      line: item.lineNo,
      startUp: item.status ? 1: 0
    })
  })
  await doParam(param)
}
const doParam = async (param) => {
  if (!param) return
  try {
    const res = await axios.postAction("/api/device/line-control/run",param)
    if (res.success){
      message.success(res.msg || this.$t('common.doSuccess'))
    }else {
      message.error(res.msg || this.$t('common.doError'))
    }
  } catch {
    console.log('err')
  }

}

const open = async (record) => {
  await initModal(record)
  await nextTick()
  // formRef.value.resetFields()
  // allowUnfinishedHangerOut.value = record.allowUnfinishedHangerOut ? true : false;
  // formState.value = pick(recordInfo.value, ['role', 'stationQty', 'stationCapacity', 'stationId', 'staffId', 'autoOutClothSpeed'])
  // if (record.staffId) onUserChange(record.staffId)
}
// const handleOk = async () => {
//   confirmLoading.value = true
//   loading.value = true
//   try {
//
//     console.log(dataList.value)
//     // await formRef.value.validateFields()
//
//     // if (formState.value.stationQty > formState.value.stationCapacity) {
//     //   message.warning('站内数不能大于容量数')
//     // } else {
//     //   confirmLoading.value = true
//     //   const info = getSendInfo()
//     //   const res = await axios.postAction(info.url, info.params)
//     //   if (res.success) {
//     //     message.success(res.msg || '操作成功')
//     //     visible.value = false
//     //     // outUnfinishedHanger.value = false
//     //     emits('ok')
//     //   }
//     //   confirmLoading.value = false
//     // }
//   } catch {
//     loading.value = false
//     confirmLoading.value = false
//   }
// }
const initModal = async () => {
  title.value = this.$t('hangManage.more')+'...'
  loading.value = true
  visible.value = true
  checkedAllStart.value = false
  checkedAllLogin.value = false

  try {
    // const res = await axios.postAction("/api/device/hanger-line/list")
    hangerLineList.value = getLocalStorage("hangerLineList") || [];
    let lineNoList =  hangerLineList.value.map(item=>item.lineNo)
    const res = await axios.postAction("/api/hanger/hangerline-realtime/get-line-status",lineNoList)
    // console.log(res)
    if (res.success){
      dataList.value = res.data || []
    }
    loading.value = false
  }catch (e) {
    loading.value = false
  }
}

const handleCancel = () => {
  formState.value = {}
  visible.value = false
  loading.value = false
}

defineExpose({
  open
})
</script>